<template>
	<view class="cu-form-boxs  bg-white">
		<view class="flex justify-between bg-white">
			<view class="action">
				{{props.title}}
			</view>
			<view class="action">
				{{imgList.length}}/{{props.size}}
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
					:data-url="imgList[index]">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids " @tap="ChooseImage" v-if="imgList.length<props.size">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		uploadFile
	} from '@/common/utils/http'
	import {
		onMounted,
		ref,
		watch
	} from "vue";
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const imgList = ref([''])
	const props = defineProps({
		title: {
			type: String,
			default: '图片上传'
		},
		size: {
			type: Number,
			default: 4
		},
		src: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: ''
		}
	})
	watch(() => props.src, (newValue, oldValue) => {
		if (newValue&&newValue.length > 0) {
			imgList.value = [newValue]
		} else {
			imgList.value = []
		}
	});
	onMounted(() => {
		if (props.src&&props.src.length > 0) {
			imgList.value = [props.src]
		} else {
			imgList.value = []
		}
	});
	const ChooseImage = (e: any) => {
		uni.chooseImage({
			count: props.size, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: (res: any) => {
				if (res.tempFilePaths.length > 0) {
					onUploadFiles(res.tempFilePaths)
				}
			},fail(val) {
				console.log(val)
			}
		});
	}
	/**
	 * 点击事件
	 */
	const onUploadFiles = async (tempFilePaths: any) => {
		const res: any = await uploadFile('/api/file/upload', {}, tempFilePaths[0])
		if (res.code == 1000) {
			let array = res.data
			if (array && array.length > 0) {
				let images = array.map((item: any) => {
					return item.url
				})
				if (imgList.value.length > 0) {
					imgList.value = imgList.value.concat(images)
				} else {
					imgList.value = images
				}
				emit('action', {
					name: props.name,
					value: imgList.value[0]
				})
			}
		}
	}
	const ViewImage = (e: any) => {
		uni.previewImage({
			urls: imgList.value,
			current: e.currentTarget.dataset.url
		});
	}
	const DelImg = (e: any) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除该图片？',
			cancelText: '取消',
			confirmText: '删除',
			success: res => {
				if (res.confirm) {
					imgList.value.splice(e.currentTarget.dataset.index, 1)
					emit('action', imgList.value)
				}
			}
		})
	}
</script>

<style>
	.grid {
		border-radius: 6rpx;
	}
	.cu-form-boxs{
		width: 100%;
	}
	.cu-form-group{
		padding: 0;
		margin-top: 0.5rem;
	}
</style>
